import QtQuick
import QtQuick.Window

// case1: 竖屏
Window {
    width: 80; height: 300
    visible: true

    ListView {
        id: lv
        anchors.fill: parent
        anchors.margins: 20
        clip: true // 裁剪. 默认false, 用户可以看到在列表视图之外动态创建和销毁委托的过程
        model: 100

        delegate: Item {
            id: wrapper
            required property int index
            width: lv.width
            height: 40
//            text: index // GreenBox有, 但item没有index,
            Text {
                anchors.centerIn: parent
                text: wrapper.index
            }

            Component.onCompleted: { console.log(index+" added") }
            Component.onDestruction: { console.log(index+" deleted") }
        }

        highlight: highlightComponent
        focus: true
        cacheBuffer: 80
        spacing: 5
    }

    Component {
        id: highlightComponent

        GreenBox {
            id: gb
            width: lv.width; height: lv.height

            y: lv.currentItem.y
            Behavior on y {
                SequentialAnimation{
                    PropertyAnimation {
                        target: gb
                        property: "opacity"
                        to: 0
                        duration: 200
                    }
                    NumberAnimation {
                        duration: 200
                    }
                    PropertyAnimation {
                        target: gb
                        property: "opacity"
                        to: 1
                        duration: 200
                    }
                }
            }
        }
    }
}

// case2: 横屏
//Window {
//    width: 300; height: 80
//    visible: true

//    ListView {
//        id: lv
//        anchors.fill: parent
//        anchors.margins: 20
//        clip: true // 裁剪. 默认false, 用户可以看到在列表视图之外动态创建和销毁委托的过程
//        model: 100

//        layoutDirection:  "RightToLeft" // Qt.RightToLeft // 从右到左
//        orientation: ListView.Horizontal // 水平方向滑动
//        delegate: GreenBox {
//            required property int index
//            width: lv.width
//            height: 40
//            text: index

//            Component.onCompleted: { console.log(index+" added") }
//            Component.onDestruction: { console.log(index+" deleted") }
//        }

//        cacheBuffer: 80
//        spacing: 5
//    }
//}
